import { FC, useEffect, useState } from "react";
import { observer, inject } from "mobx-react";
import { Form, Input, Button, message } from "antd";
import { useNavigate, Link } from "react-router-dom";
import Langbox from "../components/Langbox";
import { ITStore } from "../../store";
import "./index.less";

type TProp = {
  store: ITStore;
};

type TRegForm = {
  account: string;
  password: string;
  confirmpassword: string;
  email: string;
};

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const Register: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { lang, getAllLanguage },
    userStore: { registerUser, registerLoading },
  } = store;
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const [bgIndex, setBgIndex] = useState(0);

  useEffect(() => {
    getAllLanguage(false);
    let num = Math.floor(Math.random() * 4);
    setBgIndex(num);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onFinish = async (values: TRegForm) => {
    // navigate("/login");
    const { password, confirmpassword, account, email } = values;

    // 校验两次密码是否相同
    if (password !== confirmpassword) {
      message.error(lang["langpwdnotsame"]);
      return false;
    }
    const result = await registerUser({
      account,
      password,
      email
    });
    if (!result) {
      // 注册成功，跳转到登录页
      navigate("/login");
      message.success(lang["langregsuccess"]);
    } else {
      // 注册失败，提示
      const { msg } = result;
      if (msg === "duplicate") {
        message.error(lang["langregerror"]);
      }
      form.resetFields();
    }
  };

  return (
    <div className="loginbody">
      <div className="logincnt regcnt">
        <div className={`topbg bg${bgIndex}`}>
          <div className="title">{lang["langregister"]}</div>
        </div>
        <Form
          {...layout}
          form={form}
          onFinish={onFinish}
          style={{ width: "480px", padding: "0px 0 0 20px" }}
        >
          <Form.Item
            label={lang["langaccount"]}
            name="account"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={lang["langpassword"]}
            name="password"
            rules={[{ required: true, min: 6 }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label={lang["langcnfpwd"]}
            name="confirmpassword"
            rules={[{ required: true, min: 6 }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label={lang["langemail"]}
            name="email"
            rules={[{ required: true, type: "email" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button
              loading={registerLoading}
              type="primary"
              htmlType="submit"
              style={{ width: "100%" }}
            >
              {lang["langregister"]}
            </Button>
          </Form.Item>
        </Form>
        <div className="log">
          <Link to="/login">{lang["langlogin"]}</Link>
        </div>
      </div>
      <div className="lang">
        <Langbox />
      </div>
    </div>
  );
};

export default inject("store")(observer(Register));
